<template>
  <view>
    <u-sticky bgColor="#fff">
      <u-tabs :list="nav" @click="handleNav" :current="current"
        :itemStyle="{ minWidth: '33.3%', height: '60rpx' }"></u-tabs>
    </u-sticky>
    <view class="tui-coupon-list">
      <empty :zIndex="1" v-if="couponsList.length == 0">
        <view class="empty" slot="content">
          <text class="tips">暂无优惠券</text>
        </view>
      </empty>
      <view class="tui-coupon-item tui-top20" v-for="(item, index) in couponsList" :key="index"
        @click="handleCoupon(item)">
        <image src="https://res.jiyaqi.com/pet/pic/bg_coupon_3x.png" class="tui-coupon-bg" mode="widthFix"></image>
        <view class="tui-coupon-item-left">
          <view class="tui-coupon-price-box" :class="{ 'tui-color-grey': item.usedFlag != '0' }">
            <view class="tui-coupon-price-sign" v-if="item.couponType == 1">￥</view>
            <view class="tui-coupon-price" :class="{ 'tui-price-small': false }">{{ item.couponAmount || 0 }}</view>
            <view class="tui-coupon-price-sign ml8" v-if="item.couponType == 2">折</view>
          </view>
          <view class="tui-coupon-intro" :class="{ 'tui-bg-red': item.usedFlag == '0' }">
            <text v-if="item.minOrderAmount">满{{ item.minOrderAmount }}可用</text>
            <text v-else>无门槛</text>
          </view>
        </view>
        <view class="tui-coupon-item-right">
          <view class="tui-coupon-content">
            <view class="tui-coupon-title-box">
              <view class="tui-coupon-btn" v-if="item.bizType === 1" :class="{ 'tui-bg-grey': item.usedFlag != '0' }">
                药品{{ item.couponType == 2 ? '折扣' : '满减' }}券</view>
              <view class="tui-coupon-btn" v-else-if="item.bizType === 2"
                :class="{ 'tui-bg-grey': item.usedFlag != '0' }">问诊券
              </view>
              <view class="tui-coupon-btn" v-else-if="item.bizType === 9"
                :class="{ 'tui-bg-grey': item.usedFlag != '0' }">商城{{ item.couponType == 2 ? '折扣' : '满减' }}券
              </view>
              <view class="tui-coupon-title">{{ item.couponName }}</view>
            </view>
            <view class="tui-coupon-rule">
              <view class="tui-rule-box tui-padding-btm">
                <view class="tui-coupon-circle"></view>
                <view class="tui-coupon-text">{{ item.scopeType == 3 ? '指定品类可用' : item.scopeType == 2 ? '指定商品可用' :
                  '全场通用' }}</view>
              </view>
              <view class="tui-rule-box tui-padding-btm">
                <view class="tui-coupon-circle"></view>
                <view class="tui-coupon-text">不可叠加使用</view>
              </view>
              <view class="tui-rule-box">
                <view class="tui-coupon-circle"></view>
                <view class="tui-coupon-text" v-if="item.validDateType == 1 || item.validDateType == 2">{{
                  item.useStartTime | filterDay }}-{{
                    item.useEndTime | filterDay }} 到期</view>
                <!-- <view class="tui-coupon-text" v-else-if="item.validDateType == 2">领取后 {{ item.validDays }}天 有效</view> -->
                <view class="tui-coupon-text" v-else>永久有效</view>
              </view>
            </view>
          </view>
        </view>
        <view class="tui-btn-box">
          <tui-button :size="24" :disabled="item.usedFlag != '0'" :plain="false"
            :type="item.usedFlag == '0' ? 'danger' : 'gray'" shape="circle" width="120rpx" height="52rpx">
            {{ item.usedFlag == 0 ? '立即使用' : item.usedFlag == 1 ? '已使用' : '已过期' }}
          </tui-button>
        </view>
      </view>
    </view>
    <!--暂无优惠券-->
    <!-- <view class="noCommodity" v-if="couponsList.length === 0 && loading === true">
      <view class="noPictrue">
        <image :src="`${$VUE_APP_RESOURCES_URL}/images/noCoupon.png`" class="image" />
      </view>
    </view> -->
    <u-safe-bottom></u-safe-bottom>
  </view>
</template>
<script>
import empty from '@/components/empty.vue'
import dayjs from 'dayjs'
import {
  getCouponsUser,
  getShareCouponsList,
  getCouponReceive,
  getCouponsAll,
} from '@/api/user'
const NAME = 'UserCoupon'

export default {
  name: 'UserCoupon',
  data() {
    return {
      couponIds: '',
      couponsList: [],
      loading: false,
      nav: [
        {
          name: '未使用',
        }, {
          name: '已使用',
        }, {
          name: '已过期'
        }],
      current: 0
    }
  },
  filters: {
    filterDay(time) {
      return dayjs(time).format('YYYY/MM/DD')
    }
  },
  watch: {
    $yroute: function (n) {
      var that = this
      if (n.name === NAME) {
        //that.getUseCoupons()
      }
    },
  },
  onLoad(options) {
    // if (options.couponIds) {
    //   this.couponIds = options.couponIds
    //   getShareCouponsList(this.couponIds).then(res => {
    //     this.couponsList = res.data
    //     this.$forceUpdate()
    //   })
    // } else {
    //   this.getUseCoupons()
    // }
    this.getMyCouponsLsit()
  },
  onShow() {
    // if (this.couponIds) {
    //   getShareCouponsList(this.couponIds).then(res => {
    //     this.couponsList = res.data
    //     this.$forceUpdate()
    //   })
    // }
  },
  methods: {
    //获取我的优惠券
    getMyCouponsLsit(){
      const _this = this
      this.couponsList = []
      getCouponsUser(this.current).then(res => {
        console.log(res)
        if(res.status == 200 && res.data)
        _this.couponsList = res.data
      })
    },
    onShareTimeline: function () {
      return {
        title: this.miniHomeRemark,
        imageUrl: this.miniHomeImg,
        path:
          'pages/user/coupon/UserCoupon/index?spread=' +
          uni.getStorageSync('uid'),
      }
    },
    onShareAppMessage: function () {
      let ids = this.couponsList.map(item => item.id).join(',')
      return {
        title: this.miniHomeRemark,
        imageUrl: this.miniHomeImg,
        path:
          'pages/user/coupon/UserCoupon/index?spread=' +
          uni.getStorageSync('uid'),
      }
    },
    getUseCoupons() {
      // let that = this,
      //   type = 0
      getCouponsAll({
        usedFlag: this.current
      }).then(res => {
        this.couponsList = res || []
        this.loading = true
      })
    },
    getCouponUser(id) {
      getCouponReceive(id).then(() => {
        uni.showToast({
          title: '已领取',
          icon: 'none',
          duration: 2000,
        })
        getShareCouponsList(this.couponIds).then(res => {
          this.couponsList = res.data
          this.$forceUpdate()
        })
      })
    },
    handleCoupon(item) {
      // if (!this.couponIds) {
      //   if (item._type != 0) this.toPage('home/index', false, 3)
      // } else {
      //   if (item.isUse) this.toPage('home/index', false, 3)
      //   else this.getCouponUser(item.id)
      // }
      if (item.usedFlag != '0') return
      if (item.bizType == 1) return this.toPage('/packagePharmacy/pages/pharmacy/pharmacy', false, 1)
      else if (item.bizType == 2) return this.toPage('inquiry/inquiry', false, 3)
      else if (item.bizType == 9) return this.toPage('home/index', false, 3)
    },
    handleNav(e) {
      this.current = e.index
      console.log("e.index="+e.index)
      this.getMyCouponsLsit()
      //this.getUseCoupons()
    }
  },
}
</script>

<style scoped lang="less">
.bg-color-orgin {
  background-color: #ff6010 !important;
}
</style>
<style lang="scss" scoped>
.l {
  .txt {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 28rpx;
    color: #999999;
    line-height: 28rpx;
    text-align: left;
    font-style: normal;

    &.active {
      color: #1a1a1a;
    }
  }

  .time {
    margin-top: 24rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #999999;
    line-height: 24rpx;
    text-align: left;
    font-style: normal;
  }
}

.inquiry-btn {
  margin: 0;
  width: 130rpx;
  height: 56rpx;
  background: #d8d8d8;
  border-radius: 28rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 22rpx;
  color: #ffffff;
  line-height: 56rpx;
  text-align: center;
  font-style: normal;

  &.active {
    background: #FF5900;
    color: #fff;
  }
}

.inquiry {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  background: #f5f6f7;

  &-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64rpx;
    height: 56rpx;
    color: #fff;
    background: #d8d8d8;
    border-radius: 6rpx;
  }

  &.active {
    background: rgba(1, 188, 141, 0.1);

    .inquiry-box {
      background: #FF5900;
    }
  }
}

.tui-coupon-list {
  width: 100%;
  padding: 0 25rpx;
  box-sizing: border-box;
}

.tui-coupon-banner {
  width: 100%;
}

.tui-coupon-item {
  width: 100%;
  height: 210rpx;
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 30rpx;
  box-sizing: border-box;
  overflow: hidden;
}

.tui-coupon-bg {
  width: 100%;
  height: 210rpx;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.tui-coupon-sign {
  height: 110rpx;
  width: 110rpx;
  position: absolute;
  z-index: 9;
  top: -30rpx;
  right: 40rpx;
}

.tui-coupon-item-left {
  width: 218rpx;
  height: 210rpx;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-shrink: 0;
}

.tui-coupon-price-box {
  display: flex;
  color: #e41f19;
  align-items: flex-end;
}

.tui-coupon-price-sign {
  font-size: 30rpx;
}

.ml8 {
  margin-left: 8rpx;
}

.tui-coupon-price {
  font-size: 70rpx;
  line-height: 68rpx;
  font-weight: bold;
}

.tui-price-small {
  font-size: 58rpx !important;
  line-height: 56rpx !important;
}

.tui-coupon-intro {
  margin-top: 18rpx;
  color: #666;
  border-radius: 6rpx;
  background: #f7f7f7;
  padding: 8rpx 10rpx;
  font-size: 26rpx;
  line-height: 26rpx;
  font-weight: 400;
}

.tui-coupon-item-right {
  flex: 1;
  height: 210rpx;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 24rpx;
  box-sizing: border-box;
  overflow: hidden;
}

.tui-coupon-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tui-coupon-title-box {
  display: flex;
  align-items: flex-start;
}

.tui-coupon-btn {
  padding: 6rpx;
  background: #ffebeb;
  color: #e41f19;
  font-size: 25rpx;
  line-height: 25rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.9);
  transform-origin: 0 center;
  border-radius: 4rpx;
  flex-shrink: 0;
}

.tui-color-grey {
  color: #888 !important;
}

.tui-bg-grey {
  background: #f0f0f0 !important;
  color: #888 !important;
}

.tui-bg-red {
  background: #ffebeb !important;
  color: #e41f19 !important;
}

.tui-coupon-title {
  width: 100%;
  height: 80rpx;
  font-size: 28rpx;
  line-height: 36rpx;
  color: #333;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical;
  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2;
  /** 显示的行数 **/
  overflow: hidden;
}

.tui-coupon-rule {
  padding-top: 0rpx;
}

.tui-rule-box {
  display: flex;
  align-items: center;
  transform: scale(0.8);
  transform-origin: 0 100%;
}

.tui-padding-btm {
  padding-bottom: 6rpx;
}

.tui-coupon-circle {
  width: 8rpx;
  height: 8rpx;
  background: rgb(160, 160, 160);
  border-radius: 50%;
}

.tui-coupon-text {
  font-size: 28rpx;
  line-height: 28rpx;
  font-weight: 400;
  color: #666;
  padding-left: 8rpx;
  white-space: nowrap;
}

.tui-top20 {
  margin-top: 20rpx;
}

.tui-coupon-radio {
  transform: scale(0.7);
  transform-origin: 100% center;
}

.tui-btn-box {
  position: absolute;
  width: 120rpx;
  height: 52rpx;
  right: 20rpx;
  bottom: 40rpx; z-index: 10;
}
</style>
